<!DOCTYPE html>
<html>

<head>
  <style>
    canvas {
      border: 1px solid black;
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, 50%);
    }
  </style>
</head>

<body>
  <div>
    <iframe
      src="https://open.ys7.com/ezopen/h5/iframe?url=ezopen://open.ys7.com/BA5899709/1.hd.live&autoplay=1&accessToken=at.ck1gy1sx4wv2o2vn8mx1u5j6bkhvhlmm-26l0vqi6vq-19sammz-rx4vg40l4"
      width="600" height="400" id="ysOpenDevice" allowfullscreen>
    </iframe>
    <!-- <canvas id="greaterThanCanvas" width="400" height="400"></canvas> -->
  </div>


  <script>
    // // 获取Canvas元素和上下文
    // var canvas = document.getElementById("greaterThanCanvas");
    // var ctx = canvas.getContext("2d");

    // // 设置大于号参数
    // var centerX = canvas.width / 2;
    // var centerY = canvas.height / 2;
    // var arrowSize = 50;
    // var arrowWidth = 3;
    // var arrowColor = "blue";
    // //画线
    // ctx.beginPath();
    // ctx.moveTo(centerX - arrowSize, centerY);
    // ctx.lineTo(centerX + arrowSize * 2, centerY);
    // ctx.strokeStyle = arrowColor;
    // ctx.lineWidth = 3;
    // ctx.stroke();
    // // 绘制大于号
    // ctx.beginPath();
    // ctx.moveTo(centerX - arrowSize / 10 + 50, centerY - arrowSize / 2);
    // ctx.lineTo(centerX + arrowSize + 50, centerY);
    // ctx.lineTo(centerX - arrowSize + 95, centerY + arrowSize / 2);
    // ctx.lineWidth = arrowWidth;
    // ctx.strokeStyle = arrowColor;
    // ctx.stroke();
    // // 绘制大于号
    // ctx.beginPath();
    // ctx.moveTo(centerX - arrowSize / 10 + 70, centerY - arrowSize / 2 - 3);
    // ctx.lineTo(centerX + arrowSize + 70, centerY);
    // ctx.lineTo(centerX - arrowSize + 95 + 20, centerY + arrowSize / 2 + 3);
    // ctx.lineWidth = arrowWidth;
    // ctx.strokeStyle = arrowColor;
    // ctx.stroke();
    // 获取Canvas元素和上下文
    var canvas = document.getElementById("greaterThanCanvas");
    var ctx = canvas.getContext("2d");

    // 设置大于号参数
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var arrowSize = 20;
    var arrowWidth = 2;
    var arrowColor = "red";
    console.log(centerX, 'X坐标')
    console.log(centerY, 'Y坐标')
    // 绘制箭头线
    ctx.beginPath();
    ctx.moveTo(centerX - arrowSize * 3, centerY);
    ctx.lineTo(centerX + arrowSize * 2, centerY);
    ctx.strokeStyle = arrowColor;
    ctx.lineWidth = arrowWidth;
    ctx.stroke();
    // 绘制大于号
    ctx.beginPath();
    ctx.moveTo(centerX + arrowSize / 1, centerY - arrowSize / 2);
    ctx.lineTo(centerX + arrowSize * 2, centerY);
    ctx.lineTo(centerX + arrowSize / 1, centerY + arrowSize / 2);
    ctx.lineWidth = arrowWidth;
    ctx.strokeStyle = arrowColor;
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(centerX + arrowSize * 1.5, centerY - arrowSize / 2);
    ctx.lineTo(centerX + arrowSize * 2.5, centerY);
    ctx.lineTo(centerX + arrowSize * 1.5, centerY + arrowSize / 2);
    ctx.lineWidth = arrowWidth;
    ctx.strokeStyle = arrowColor;
    ctx.stroke();
    // 绘制小于号
    ctx.beginPath();
    ctx.moveTo(centerX - arrowSize * 2, centerY - arrowSize / 2);
    ctx.lineTo(centerX - arrowSize * 3, centerY);
    ctx.lineTo(centerX - arrowSize * 2, centerY + arrowSize / 2);
    ctx.lineWidth = arrowWidth;
    ctx.strokeStyle = arrowColor;
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(centerX - arrowSize * 2.5, centerY - arrowSize / 2);
    ctx.lineTo(centerX - arrowSize * 3.5, centerY);
    ctx.lineTo(centerX - arrowSize * 2.5, centerY + arrowSize / 2);
    ctx.lineWidth = arrowWidth;
    ctx.strokeStyle = arrowColor;
    ctx.stroke();


    // 填充长方形颜色
    ctx.fillStyle = arrowColor;
    // 绘制填充长方形
    ctx.fillRect(centerX - arrowSize * 1.5, centerX - arrowSize / 2, arrowSize * 2, arrowSize);
    //空心箭头左边的线
    ctx.beginPath();
    ctx.moveTo(centerX + arrowSize * 2.5, centerY);
    ctx.lineTo(centerX + arrowSize * 4, centerY);
    ctx.strokeStyle = arrowColor;
    ctx.lineWidth = arrowWidth;
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(centerX - arrowSize * 5, centerY);
    ctx.lineTo(centerX - arrowSize * 3.5, centerY);
    ctx.strokeStyle = arrowColor;
    ctx.lineWidth = arrowWidth;
    ctx.stroke();

    //空心箭头
    ctx.beginPath();
    ctx.moveTo(centerX + arrowSize * 5, centerY);
    ctx.lineTo(centerX + arrowSize * 4.5 - arrowSize / 2, centerY - arrowSize / 2);
    ctx.lineTo(centerX + arrowSize * 4.5 - arrowSize / 2, centerY + arrowSize / 2);
    ctx.closePath();
    ctx.strokeStyle = arrowColor;
    ctx.lineWidth = arrowWidth;
    ctx.stroke();
  </script>

</body>

</html>